import React, {
    useCallback,
    useEffect,
    useLayoutEffect,
    useMemo,
    useState
} from "react";
import {connect, useDispatch} from "react-redux";
import intl from "react-intl-universal";
import moment from "moment";
import Empty from "../../../../../../common/component/empty";
import { getRangeDate, getDateType, getDateWeek, constructionDate, getNumberHZ } from "../../../../../../common/util/index";
import "./index.scss";
import Scrollbars from "react-custom-scrollbars";

moment.locale('zh-cn', {
    holidays: {
      '01-01': '元旦',
      '02-14': '情人节',
      // 添加其他节假日
    }
  });

function MyScheduleMonth(props){
    let {
        changeCurrentType,
        chooseDate,
        scheduleList,
        showDayType,
        holidayList,
        year = 2025,
        changeMonthSchedule
    } = props;
    const [weekList, setWeekList] = useState(["一", "二", "三", "四", "五", "六", "日"]);
    const [typeScheduleList, setTypeScheduleList] = useState([]);

    const constructMonthTable = (year, month) => {
        let startWeek = new Date(year, month-1, 1).getDay();
        let maxDay = new Date(year, month, 0).getDate();
        let arr = [];
        for(let i = 1; i <= maxDay; i++){
            arr.push({
                day: i,
                dayText: i,
                date: year + "-" + month + "-" + i,
                list: []
            });
        }
        if(startWeek !== 1){
            for(let i = 0; i < startWeek - 1; i++){
                arr.unshift({});
            }
        }
        arr.forEach((item)=>{
            scheduleList.forEach((child)=>{
                if(item.date && moment(child.scheduleDate).format("YYYY-MM-DD") === moment(item.date).format("YYYY-MM-DD")){
                    item.list.push(child);
                }
            })
        })
        return arr;
    }

    const dayClick = (month, day) => {
        changeMonthSchedule(`${year}-${month}-${day}`);
    }

    const MonthArr = useMemo(()=>{
        let arr = [];
        let curYear = moment().get("year");
        let curMonth = moment().get("month")+1;
        let curDay = moment().get("date");
        for(let i = 1; i < 13; i++){
            let dayArr = constructMonthTable(year, i);
            arr.push(
                <div className="year-month-one" key={i}>
                    <div className="month-one-title" style={{color: year === curYear && i === curMonth? "#0099ff": ""}}>{i}月</div>
                    <div className="month-one-week-list">
                        {weekList.map((item, index)=><div className="month-one-week-one" key={index}>{item}</div>)}
                    </div>
                    <div className="month-one-day-list">
                        {
                            dayArr.map((item, index)=>(
                                <div 
                                onClick={()=>dayClick(i, item.day)}
                                className={`month-one-day-one ${year === curYear && i === curMonth && item.day === curDay? "curDate": ""} ${item.list?.length? "haveSchedule": ""}`} 
                                key={index}>
                                    {
                                        year === curYear && i === curMonth && item.day === curDay?
                                        <span className="curdate-text">今</span>:
                                        ""
                                    }
                                    {item.day}
                                </div>
                            ))
                        }
                    </div>
                </div>
            );
        }
        return arr;
    }, [year, scheduleList]);
    
    return (
        <Scrollbars style={{height: 490}}>
            <div className="type-year-container">
            {MonthArr}
            </div>
        </Scrollbars>
    )
}
const mapProps = (state) => {
    return {
        userInfo: state.userInfo,
        sysAddrInfo: state.sysAddrInfo,
        identityList: state.identityList,
        currentIdentity: state.currentIdentity,
        skinInfo: state.skinInfo,
        sysInfo: state.sysInfo,
        termInfo: state.termInfo,
        holidayList: state.holidayList
    }
}
export default connect(mapProps)(MyScheduleMonth);